<template>
  <div class="home">
    <van-swipe
      :autoplay="2000"
      class="swiper"
    >
      <van-swipe-item
        v-for="(item, index) in swiperList"
        :key="index"
        @click="lunbo(item)"
      >
        <img
          class="swiperImg"
          v-lazy="item.img"
        />
      </van-swipe-item>
    </van-swipe>
    <div class="official">官网</div>
    <div class="wireBox">
      <div class="wireLeft"></div>
      <div class="wireCenter"></div>
      <div class="wireRight"></div>
    </div>
    <div
      v-for="item in longList"
      :key="item.id"
      class="longyuan"
      @click="toLongYuan(item)"
    >
      <img
        class="longyuanImg"
        :src="item.img"
      />
    </div>
    <div class="store">商城</div>
    <div class="wireBox1">
      <div class="wireLeft1"></div>
      <div class="wireCenter1"></div>
      <div class="wireRight1"></div>
    </div>
    <div
      v-for="item in xiaoList"
      :key="item.id"
      class="xiao"
      @click="goXiao"
    >

      <wx-open-launch-weapp
        username="gh_881336b56a43"
        path="pages/index/index.html"
      >
        <img
          class="xiaoImg"
          :src="item.img"
        />
      </wx-open-launch-weapp>
    </div>
    <div class="matrix">新媒体矩阵</div>
    <div class="wireBox2">
      <div class="wireLeft2"></div>
      <div class="wireCenter2"></div>
      <div class="wireRight2"></div>
    </div>
    <div class="gridBox">
      <div
        v-for="item in gridList"
        :key="item.id"
        class="gridBoxList"
        @click="grid(item)"
      >
        <div class="gridImgBox">
          <img :src="item.img">
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
import wx from 'weixin-js-sdk'
export default {
  data() {
    return {
      swiperList: [],
      longList: [],
      xiaoList: [],
      gridList: [],
      miyao: '',
      id: ''
    }
  },
  created() {
    this.getSwiper()
    this.getChip()
    this.getFormation()
    // this.goXiao()
  },
  methods: {
    lunbo(e) {
      // if (e.title == '乐龄国际官网') {
      //   window.open(e.appProof, 'blank')
      // } else {
      //   window.open(e.appProof, 'blank')
      // }
      window.open(e.appProof, 'blank')
    },
    // 去小程序
    async goXiao() {
      const carouselKist = {
        appProof: this.id,
        url: 'http://192.168.85.105'
      }
      const res = await this.$http.getSignature(carouselKist)
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        nonceStr: res.data.nocestr,
        signature: res.data.signature,
        appId: res.data.appProof,
        timestamp: res.data.timestamp,
        jsApiList: [
          // 所有要调用的 API 都要加到这个列表中
          'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'getLocation', 'openLocation'
        ],
        openTagList: [
          'wx-open-launch-weapp'
        ]
      }),
        wx.ready(function () {
          // 在这里调用 API
          wx.checkJsApi({
            jsApiList: [
              'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'getLocation', 'openLocation'
            ],
            openTagList: [
              'wx-open-launch-weapp'
            ],
            success: function (res) {
            }
          })
        })
    },
    toLongYuan(item) {
      window.open(item.appProof, 'blank')
    },
    // 轮播图
    async getSwiper() {
      const carouselKist1 = {
        position: 1,
        page: 1,
        size: 100,
        active: 1
      }
      const res = await this.$http.getCarousel(carouselKist1)
      this.swiperList = res.data.content
    },
    // 瓷片区
    async getChip() {
      const carouselKist2 = {
        position: 2,
        page: 1,
        size: 100,
        active: 1
      }
      // appProof
      const res = await this.$http.getCarousel(carouselKist2)
      res.data.content.forEach(el => {
        if (el.appType === 1) {
          this.xiaoList.push(el)
          this.id = el.appProof
        } else if (el.appType === 3) {
          this.longList.push(el)
        }
      })
    },
    // 矩阵区
    async getFormation() {
      const carouselKist3 = {
        position: 3,
        page: 1,
        size: 100,
        active: 1
      }
      const res = await this.$http.getCarousel(carouselKist3)
      this.gridList = res.data.content
    },
    // 矩阵区点击事件
    grid(item) {
      window.open(item.appProof, 'blank')
    }
  }
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.home {
  max-width: 900px;
  min-width: 750rpx;
  margin: 0 auto;
  .swiper {
    width: 750rpx;
    height: 366rpx;
    margin: 0 auto;
    .swiperImg {
      width: 100%;
      height: 100%;
    }
  }
  .longyuan {
    width: 93%;
    height: 220rpx;
    margin-bottom: 14rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    .longyuanImg {
      width: 100%;
      height: 100%;
    }
  }
  .leling {
    width: 93%;
    height: 220rpx;
    margin: 0 auto;
    .lelingImg {
      width: 100%;
      height: 100%;
    }
  }
  .xiao {
    width: 93%;
    height: 220rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    .xiaoImg {
      width: 100%;
      height: 100%;
    }
  }
  .gridBox {
    width: 93%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    .gridBoxList {
      width: 107px;
      height: 107px;
      margin-bottom: 32px;
    }
    .gridImgBox {
      width: 100%;
      height: 107px;
    }
    .gridImgBox img {
      width: 100%;
      height: 100%;
    }
  }
  .official,
  .store {
    width: 62rpx;
    height: 31rpx;
    color: #333333;
    font-size: 31rpx;
    font-weight: bold;
    text-align: center;
    line-height: 31rpx;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 5px;
    font-family: SourceHanSansCN-Bold;
  }
  .wireBox {
    width: 160px;
    display: flex;
    margin: 0 auto;
    margin-bottom: 20px;
    .wireLeft {
      flex: 1;
      height: 1px;
      background-color: #d4d4d4;
    }
    .wireCenter {
      flex: 1;
      height: 6px;
      background-color: #61cbc7;
      margin-top: -3px;
    }
    .wireRight {
      flex: 1;
      height: 1px;
      background-color: #d4d4d4;
    }
  }

  .wireBox1 {
    width: 160px;
    display: flex;
    margin: 0 auto;
    margin-bottom: 20px;
    .wireLeft1 {
      flex: 1;
      height: 1px;
      background-color: #d4d4d4;
    }
    .wireCenter1 {
      flex: 1;
      height: 6px;
      background-color: #61cbc7;
      margin-top: -3px;
    }
    .wireRight1 {
      flex: 1;
      height: 1px;
      background-color: #d4d4d4;
    }
  }
  .matrix {
    width: 158rpx;
    height: 30rpx;
    color: #333333;
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    line-height: 31rpx;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 5px;
    font-family: SourceHanSansCN-Bold;
  }
  .wireBox2 {
    width: 160px;
    display: flex;
    margin: 0 auto;
    margin-bottom: 20px;
    .wireLeft2 {
      flex: 1;
      height: 1px;
      background-color: #d4d4d4;
    }
    .wireCenter2 {
      flex: 1;
      height: 6px;
      background-color: #61cbc7;
      margin-top: -3px;
    }
    .wireRight2 {
      flex: 1;
      height: 1px;
      background-color: #d4d4d4;
    }
  }
}
</style>
